<template>
  <aside class="left-tab">
    <ul>
      <li>
        <div class="item-title">
          <i class="iconfont icon-test"></i>
          <span class="title">重点人员管理</span>
        </div>
        <ul class="link-list">
          <li>
            <router-link to="">人员管理</router-link>
          </li>
          <li>
            <router-link to="">类型管理</router-link>            
          </li>
        </ul>
      </li>
      <li>
        <div class="item-title">
          <i class="iconfont icon-test1"></i>
          <span class="title">临时布控管理</span>
        </div>
        <ul class="link-list">
          <li>
            <router-link to="">任务管理</router-link>
          </li>
          <li>
            <router-link to="">任务审批</router-link>            
          </li>
        </ul>
      </li>
      <li>
        <div class="item-title">
          <i class="iconfont icon-test2"></i>
          <span class="title">预警管理</span>
        </div>
        <ul class="link-list">
          <li>
            <router-link to="">重点人员预警</router-link>
          </li>
          <li>
            <router-link to="">临时布控预警</router-link>            
          </li>
          <li>
            <router-link to="">重点人员预警历史</router-link>            
          </li>
        </ul>
      </li>
      <li>
        <div class="item-title">
          <i class="iconfont icon-test3"></i>
          <span class="title">预警报警</span>
        </div>
      </li>
      <li>
        <div class="item-title">
          <i class="iconfont icon-test4"></i>
          <span class="title">系统管理</span>
        </div>
      </li>
    </ul>
  </aside>
</template>

<script>
export default {
  data () {
    return {}
  }
}
</script>

<style lang="stylus" scoped>
@import "../assets/style/_mixin.styl";
@import url('//at.alicdn.com/t/font_1167180_86unpy6pmnn.css');

.left-tab{
  position fixed
  top 80px
  left 15px
  width 150px
  height calc(100% - 120px)
  border 1px solid $borColor
  padding 12px
  .item-title{
    height 34px
    line-height 34px
    .iconfont{
      font-size 20px
      color #00baff
      vertical-align middle
    }
    .title{
      font-size 14px
      color #fefefe
      margin-left 6px
      vertical-align middle
    }
  }
  .link-list{
    li{
      height 24px
      line-height 24px
      font-size 12px
      padding-left 26px
    }
    a{
      color $acolor
      transition .4s all
      &:hover{
        color $ahovercolor
      }
    }
  }
}
@media screen and (max-height: 900px) {
  .left-tab{
    top 70px
    height: calc(100vh - 105px)
  }
}
@media screen and (max-height: 768px) {
  .left-tab{
    top 60px
    height: calc(100vh - 90px)
  }
}
</style>